<template>
    <a-card :bordered="false">
        <div class="btn-container">
            <a-popconfirm placement="topLeft" ok-text="确认清空" cancel-text="取消" @confirm="confirmClear" @cancel="clearCancel">
                <a-icon slot="icon" type="" style="color: red" />
                <template slot="title">
                    <a-form-item label="清理选项" >
                        <a-select style="width: 300px" v-model="query.clearLogType" :getPopupContainer="node => node.parentNode">
                            <a-select-option value="1">一个月之前日志数据</a-select-option>
                            <a-select-option value="2">三个月之前日志数据</a-select-option>
                            <a-select-option value="3">六个月之前日志数据</a-select-option>
                            <a-select-option value="4">一年之前日志数据</a-select-option>
                            <a-select-option value="5">一千条以前日志数据</a-select-option>
                            <a-select-option value="6">一万条以前日志数据</a-select-option>
                            <a-select-option value="7">三万条以前日志数据</a-select-option>
                            <a-select-option value="8">十万条以前日志数据</a-select-option>
                            <a-select-option value="9">清理所有日志数据</a-select-option>
                        </a-select>
                    </a-form-item>
                </template>
                <a-button type="danger" icon="interation">清空日志</a-button>
            </a-popconfirm>
        </div>
        <j-vxe-table
        ref="vTable"
        toolbar
        keep-source
        :loading="loading"
        :dataSource="dataSource"
        :columns="columns"
        :pagination="pagination"
        :toolbar-config="toolbarConfig"
        @pageChange="handlePageChange"
        style="margin-top: 0px;"
        >
            <template v-slot:timeFormat="props">
                <template>
                <span v-if="moment(props.value).isValid()">{{moment(props.value).format('YYYY-MM-DD HH:mm:ss')}}</span>
                <span v-else>—</span>
                </template>
            </template>
            <template v-slot:executeTime="props">
                <template>
                <span v-if="moment(props.row.triggerTime).isValid()&&moment(props.row.handleTime).isValid()">{{ (moment(props.row.handleTime).diff(moment(props.row.triggerTime),'seconds')/60).toFixed(2)}}分钟</span>
                <span v-else>—</span>
                </template>
            </template>
            <template v-slot:handleCode="props">
                <template>
                <a-tag color="#87d068" v-if="props.value===200">成功</a-tag>
                <a-tag color="#f50" v-if="props.row.handleCode===500">失败</a-tag>
                <a-tag color="#2db7f5" v-if="props.row.handleCode===0">运行中</a-tag>
                </template>
            </template>
            <template v-slot:action="props">
                <template>
                <a @click="showDetail(props.row)">详情</a>
                </template>
            </template>
        </j-vxe-table>
        <plan-log-detail-modal ref="modalForm"></plan-log-detail-modal>
    </a-card>
</template>

<script>
import moment from 'moment'
import { WebsocketTableMixin } from '../../../mixins/WebsocketTableMixin'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { clearLog } from '../../../api/api'
import PlanLogDetailModal from '../modules/PlanLogDetailModal'

export default {
  name: 'CheckPlanLogList',
  mixins: [WebsocketTableMixin],
  components: {
      PlanLogDetailModal
  },
  data() {
    return {
      moment,
      query:{
        logStatus: '0'
      },
      loading: false,
      dataSource: [],
      toolbarConfig: {
        // prefix 前缀；suffix 后缀
        slot: ['prefix', 'suffix'],
        // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
        btn: ['clearSelection']
      },
      columns: [
        {
          title: '执行ID',
          key: 'id',
          width: '100px'
        },
        {
          title: '模型名',
          key: 'modelName',
          ellipsis: true
        },
        {
          title: '执行时间',
          key: 'handleTime',
          type: JVXETypes.slot,
          slotName: 'executeTime',
        },
        {
            title: '开始时间',
            key: 'triggerTime',
            type: JVXETypes.slot,
            slotName: 'timeFormat',
        },
        {
            title: '结束时间',
            key: 'handleTime',
            type: JVXETypes.slot,
            slotName: 'timeFormat',
        },
        {
          title: '执行结果',
          key: 'handleCode',
          width: '80px',
          type: JVXETypes.slot,
          slotName: 'handleCode',
          align: 'center'
        },
        {
          title: '操作',
          fixed: 'right',
          width: '100px',
          align: 'center',
          type: JVXETypes.slot,
          slotName: 'action'
        }
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30', '100', '200']
      },
      socketUrl: 'logWebsocket'
    }
  },
  mounted() {
    this.query.jobName = this.$route.query.taskName
    console.log(this.query,'query');
  },
  methods: {
    handlePageChange(event) {
        console.log(event,'pagechange');
      // 重新赋值
      this.query.current = event.current
      this.query.pageSize = event.pageSize
      this.query.pageNo = event.current
      this.query.command = '/jobLogPages'
      // 查询数据
      this.websocketSend(JSON.stringify(this.query))
    },
    initTable(){
      this.query.current = 1
      this.query.pageSize = this.pagination.pageSize
      this.query.pageNo = 1
      this.query.command = '/jobLogPages'
      // 查询数据
      this.websocketSend(JSON.stringify(this.query))
    },
    clearCancel(){
      this.query={
        logStatus: '0'
      }
    },
    confirmClear(){
      let formData=new FormData()
      formData.append('jobGroup',1)
      formData.append('type',this.query.clearLogType)
      formData.append('jobId',-1)
      clearLog(formData).then((res)=>{
        // console.log(res)
        if(res.code===200){
          this.$message.success('清空成功')
          this.query={
            logStatus: '0'
          }
        }else {
          this.$message.error('清空失败')
        }
      })
    },
    showDetail(row){
      this.$refs.modalForm.open()
    }
  }
}
</script>
<style scoped>
/* .ant-card {
  margin-left: -30px;
  margin-right: -30px;
} */
.btn-container{
    text-align:right;
}
</style>